<script setup>
import { computed, ref, watch } from 'vue';
import { classes } from '../common.js';

const props = defineProps(['visible']);
const emit = defineEmits(['update:visible', 'cancel', 'ok']);
const visible = ref(props.visible);
watch(() => visible.value, newVal => emit('update:visible', newVal));

const selected = ref('');
const search = ref('');
const searched = computed(() => classes.value.filter(label => label.includes(search.value)));

function handleDblClick(label) {
  selected.value = label;
  onOk();
}

function onCancel(event) {
  emit('cancel');
  visible.value = false;
}

function onOk(event) {
  emit('ok', selected.value);
  visible.value = false;
}
</script>

<template>
  <a-modal
    class="label-selector"
    :visible="visible"
    title="选择标签"
    :mask="false"
    :mask-closable="false"
    :closable="false"
    @cancel="onCancel">

    <a-input v-model:value="search" v-focus allow-clear></a-input>

    <ul>
      <template v-for="label in searched" :key="label">
        <li
          :class="{ curr: label == selected }"
          @click="() => selected = label"
          @dblclick="() => handleDblClick(label)">
          {{ label }}
        </li>
      </template>
    </ul>

    <template #footer>
      <a-button @click="onCancel">取消</a-button>
      <a-button type="primary" :disabled="!selected" @click="onOk">确定</a-button>
    </template>
  </a-modal>
</template>

<style>
.label-selector .ant-modal-header,
.label-selector .ant-modal-body { padding: 10px; }

.label-selector .ant-modal-title {
  font-size: 14px;
  line-height: 1;
}

.label-selector .ant-input-affix-wrapper {
  padding-left: 7px;
  padding-right: 7px;
  margin-bottom: 10px;
}

.label-selector .ant-input { font-size: 12px; }

.label-selector ul {
  overflow-y: auto;
  height: 190px;
  border: 1px solid rgb(228,228,228);
  margin-bottom: 0;
  cursor: default;
}

.label-selector li {
  padding-left: 7px;
  line-height: 1.5;
}

.label-selector li:hover {
  background-color: rgb(229,243,255);
}

.label-selector li.curr {
  background-color: rgb(205,232,255);
}
</style>
